{% extends 'base.html' %}
{% block title %}{{ _('联系我们') }}{% endblock %}
{% block content %}
<section class="max-w-3xl mx-auto px-4 py-10">
  <h1 class="text-2xl font-semibold mb-6">{{ _('联系我们购买') }}</h1>

  {% if p %}
    <div class="mb-6 border rounded-lg p-4 flex gap-4">
      {% if p.cover_image %}
      <img src="{{ p.cover_image|to_static }}" class="w-28 h-28 object-cover rounded" />
      {% endif %}
      <div class="text-sm">
        <div class="font-medium">{{ p.t('title', (get_locale()|string)) }}</div>
        {% if p.sku %}<div class="text-gray-500 mt-1">{{ _('编号：') }}{{ p.sku }}</div>{% endif %}
        <a target="_blank" class="text-emerald-700 underline mt-1 block" href="{{ url_for('front.product_detail', pid=p.id) }}">{{ _('查看商品详情') }}</a>
      </div>
    </div>
  {% endif %}

  <div class="grid md:grid-cols-3 gap-4">
    <div class="border rounded-lg p-4">
      <div class="font-medium mb-2">{{ email_label }}</div>
      {% if mailto %}
        <a href="{{ url_for('front.track_buy_click',
                    pid=p.id, ch='email',
                    next='mailto:%s?subject=%s&body=%s' % (
                         current_app.config.get('CONTACT_EMAIL',''),
                         url_quote('%s (%s)' % (p.t('title', lang), p.sku or '')),
                         url_quote(auto_msg) )) }}"
          class="btn">{{ _('发邮件') }}
        </a>
      {% else %}
        <p class="text-xs text-red-600">{{ _('未配置联系邮箱') }}</p>
      {% endif %}
    </div>

    <div class="border rounded-lg p-4">
      <div class="font-medium mb-2">{{ whatsapp_label }}</div>
      {% if wa %}
        <a href="{{ url_for('front.track_buy_click',
                    pid=p.id, ch='whatsapp',
                    next='https://wa.me/%s?text=%s' % (
                         current_app.config.get('CONTACT_WHATSAPP',''),
                         url_quote(auto_msg) )) }}"
          class="btn">{{ _('打开 WhatsApp') }}
        </a>

      {% else %}
        <p class="text-xs text-red-600">{{ _('未配置 WhatsApp 号码') }}</p>
      {% endif %}
    </div>

    <div class="border rounded-lg p-4">
      <div class="font-medium mb-2">{{ wechat_label }}</div>
      {% if kf_url %}
        <a target="_blank" href="{{ kf_url }}" class="inline-block px-4 py-2 rounded bg-emerald-600 text-white hover:bg-emerald-700">
          {{ _('打开企业微信客服') }}
        </a>
      {% endif %}
      <div class="mt-3 text-xs text-gray-500">{{ _('或扫码添加客服') }}</div>
      <div class="mt-2">
        <img src="{{ CONF.WECHAT_QR_PATH|to_static }}" alt="WeChat QR" class="w-28 h-28 object-cover rounded border">
      </div>
    </div>
  </div>

  <!-- 复制咨询内容 -->
  <div class="mt-8">
    <div class="flex items-center justify-between">
      <div class="font-medium">{{ _('咨询内容（自动生成）') }}</div>
      <button id="cpBtn" class="text-emerald-700 text-sm underline">{{ copy_label }}</button>
    </div>
    <textarea id="inq" class="mt-2 w-full border rounded p-3 text-sm" rows="5">{{ body }}</textarea>
  </div>
</section>

<script>
document.getElementById('cpBtn')?.addEventListener('click', async () => {
  const t = document.getElementById('inq');
  t.select(); t.setSelectionRange(0, 99999);
  try { await navigator.clipboard.writeText(t.value); alert("{{ _('已复制') }}"); } catch(e) { document.execCommand('copy'); alert("{{ _('已复制') }}"); }
});
</script>
{% endblock %}